﻿<script type="text/javascript" src="../JobConfiguration/js/vue"></script>
<script type="text/javascript" src="../JobConfiguration/js/axio"></script>
<script type="text/javascript" src="../JobConfiguration/js/vuejsPaginate"></script>

<div id="app">
    <div class="col-md-3"></div>
    <div class="col-md-9">
        <h1 class="page-header">Stopped Jobs</h1>

        <div v-if="getItems.length == 0" class="alert alert-info">
            No stopped jobs found
        </div>
        <div v-else class="js-jobs-list">
            <div class="table-responsive">
                <table class="table">

                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Queue</th>
                            <th>Class</th>
                            <th>Method</th>
                            <th>TimeZone</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="job in getItems">
                            <td>{{job.Id}}</td>
                            <td>{{job.Queue}}</td>
                            <td>{{job.Class}}</td>
                            <td>{{job.Method}}</td>
                            <td>{{job.TimeZoneId}}</td>
                        </tr>
                    </tbody>
                </table>

                <div style="float: right;">
                    <paginate :page-count="getPageCount"
                              :page-range="3"
                              :margin-pages="2"
                              :click-handler="clickCallbackPagination"
                              :prev-text="'＜'"
                              :next-text="'＞'"
                              :container-class="'pagination'"
                              :page-class="'page-item'">
                    </paginate>
                </div>
            </div>
        </div>
    </div>
 </div>

<script>
    var appJob = new Vue({
        el: '#app',
        components: {
            'paginate': VuejsPaginate
        },
        data() {
            return {
                jobs: null,
                pagination: {
                    parPage: 10,
                    currentPage: 1
                }
            }
        },
        methods: {
            GetJobs() {
                axios.get('GetJobsStopped')
                    .then(res => (this.jobs = res.data))
            },
            clickCallbackPagination(pageNum) {
                this.pagination.currentPage = Number(pageNum);
            }
        },
        created() {
            this.GetJobs();
        },
        computed: {
            getItems: function () {
                let current = this.pagination.currentPage * this.pagination.parPage;
                let start = current - this.pagination.parPage;
                if (this.jobs != null) return this.jobs.slice(start, current);
                else return null;
            },
            getPageCount: function () {
                return Math.ceil(this.jobs.length / this.pagination.parPage);
            }
        }
    });
</script>